<template>
  <div class="home">
    <!-- 头部 -->
    <van-sticky>
      <div class="header">
        <van-row class="line">
          <van-col class="logo" span="5">网易严选</van-col>
          <van-col span="14">
            <router-link to="/search"><van-search placeholder="请输入搜索关键词" /></router-link>
            
          </van-col>
          <van-col span="3">
            <router-link to="/login">
              <div class="logoBtn">登录</div>
            </router-link>
            
          </van-col>
        </van-row>

        <!-- 滚动标签 -->
        <div class="tag">

          <van-tabs v-if="!isShow" v-model:active="active" color="#dd1a21" title-active-color="#dd1a21"
            title-inactive-color="#333" @click-tab="onClickTab">
            <van-tab v-for="(tabItem, index) in tabList" :title="`${tabItem}`" :key="index">
              <!-- {{tabItem}} -->
            </van-tab>
          </van-tabs>

          <div v-else class="all">
            全部频道
          </div>

          <!-- 下拉按钮 -->
          <div class="arrow" @click="open">
            <van-icon v-if="!isShow" name="arrow-down" />
            <van-icon v-else name="arrow-up" />
          </div>

        </div>
        <!--菜单  -->
        <div class="menu" v-show="isShow">
          <!-- 遮罩 tabList -->
          <div class="mask">
            <div class="list">
              <van-button :color="active == index ? 'red' : '#222223'" @click="checked(index)" class="btn"
                v-for=" (item, index) in tabList" :key="index" plain type="primary" size="small">
                {{ item }}
              </van-button>
            </div>
          </div>
        </div>



      </div>
    </van-sticky>




    <!-- 推荐 模块 -->
    <div class="recommend" v-if="active == 0">
      <!-- 轮播图 -->
      <Swipe :swipeList="swipeList"></Swipe>

      <!--服务信息  -->
      <van-row class="service_info">
        <van-col span="8">
          <i class="icon icon_1"></i>
          <span>网易自营品牌</span>
        </van-col>
        <van-col span="8">
          <i class="icon icon_2"></i>
          <span>30添无忧退货</span>
        </van-col>
        <van-col span="8">
          <i class="icon icon_3"></i>
          <span>48小时快速退款</span>
        </van-col>
      </van-row>

      <!-- 2排 10列 商品展示列表 -->
      <van-grid :border="false" :column-num="5">
        <van-grid-item v-for="(goosItem, index) in goodsList" :key="index">
          <img :src="goosItem.picUrl" alt="">
          <div>{{ goosItem.text }}</div>
        </van-grid-item>
      </van-grid>

      <!-- 新人专享礼  -->
      <h4 class="exclusive_title">—— 新人专享礼——</h4>
      <div class="exclusive">
        <div class="exclusive_l">
          <img src="../../assets/images/home/exclusive1.png" alt="">
        </div>
        <div class="exclusive_r">
          <img src="../../assets/images/home/exclusive2.png" alt="">
          <img src="../../assets/images/home/exclusive3.png" alt="">
        </div>
      </div>

      <!-- 类目热销榜 -->
      <div class="hoot">
        <h4>类目热销榜</h4>
        <div class="hoot_top">
          <img class="img_r" src="../../assets/images/home/hoot1.png" alt="">
          <img src="../../assets/images/home/hoot2.png" alt="">
        </div>
        <div class="hoot_btm">
          <img src="../../assets/images/home/hoot3.png" alt="">
        </div>
      </div>

      <!-- 为你精选 -->
      <h4 style="padding-left: 10px;">为你精选</h4>

      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="choose">
          <Product v-for="item in productList " key="item.id" :item="item">
            <template v-slot:tag>
              <div class="banner-wrap">
                <div class="top" v-if="item.finalPriceInfoVO.banner?.content">
                  {{ item.finalPriceInfoVO.banner.content }}
                </div>
                <div class="btm" v-if="item.finalPriceInfoVO.banner?.title">
                  {{ item.finalPriceInfoVO.banner.title }}
                </div>

              </div>
            </template>
          </Product>
        </div>

      </van-list>
    </div>




    <!-- 居家生活 模块 -->
    <div class="life" v-if="active == 1">
      <!-- 轮播图 -->
      <Swipe :swipeList="LSSwipeList"></Swipe>
      <!-- 楼层 -->
      <Floor class="floor" v-for=" (categoryItem, index) in categoryItemList" :key="index" :categoryItem="categoryItem">
      </Floor>
    </div>

    <!-- 服饰鞋包 模块 -->
    <div class="costume" v-if="active == 2">
      服饰鞋包
    </div>


    <!-- 回到顶部 -->
    <van-back-top right="20px" bottom="80px" style="background-color:#fff; opacity: 0.8;color: black;" />

  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"

import { onMounted } from 'vue'
export default defineComponent({
  name: '',
})
</script>

<script lang="ts" setup>
import {debounce} from 'lodash'
import Swipe from '../../components/Swipe/index.vue'
import Product from '../../components/Product/index.vue'
import Floor from './components/Floor/index.vue'
import { showToast } from 'vant';
import { ReqRecommendList, ReqProductList, ReqLifeStyleList } from '../../api/home'
import { ref } from "vue"
// 当前被选中的标签
const active = ref(0);
// 组件切换
const isShow = ref(false)
// 限制条数
const limit = ref({
  size: 10
})

const loading = ref(false);
const finished = ref(false);




//初始化首页推荐列表数据
//[选项卡]
const tabList = ref(['推荐', '居家生活', '服饰鞋包', '美食酒水', '个护清洁', '母婴亲子', '运动旅行', '数码家电', '严选全球']) //品牌列表
//[轮播图]
const swipeList = ref<any>([])
//[商品列表]
const goodsList = ref<any>([])
//[产品列表]
const productList = ref<any>([])


//【居家生活】
//[轮播图]
const LSSwipeList = ref([])
//[分类列表]
const categoryItemList = ref([])


//【数据加载】
const onLoad = debounce(
  () => {
    if (productList.value.length > 49) {
      finished.value = true;
      return
    }
    //条数加10
    limit.value.size += 10
    //重新发送请求
    getProductList()
    // 加载状态结束
    loading.value = false;
  }
  , 1000)










//【点击标签触发】
const onClickTab = (e: any) => {
  // console.log(e);
  active.value = e.name
}

//【打开折叠菜单】
const open = () => {
  isShow.value = !isShow.value
}

//【点击分类按钮】
const checked = (index: number) => {
  active.value = index
}




//【封装获取首页推荐列表】
async function getRecommendList() {
  try {
    const res = await ReqRecommendList()
    //[轮播图赋值]
    swipeList.value = res.data.data.focusList
    //[商品展示列表]
    goodsList.value = res.data.data.kingKongModule.kingKongList
  } catch (error) {
    showToast('获取首页推荐列表失败');
  }
}


//【封装产品列表】
async function getProductList() {
  try {
    const res = await ReqProductList(limit.value)
    // console.log(res.data.itemList);
    productList.value = res.data.itemList
  } catch (error) {
    showToast('获取首页产品列表失败');
  }
}


// 【封装居家生活列表】
async function getLifeStyleList() {
  try {
    const res = await ReqLifeStyleList()
    //轮播图
    LSSwipeList.value = res.currentCategory.bannerList
    //分类
    categoryItemList.value = res.categoryItemList
  } catch (error) {
    showToast('获取首页产品列表失败');
  }
}



//【页面挂载】
onMounted(() => {
  getRecommendList()
  getProductList()
  getLifeStyleList()
})



</script>

<style scoped lang="scss">
.home {
  background-color: #eeeeee;

  // 【头部】
  .header {
    position: relative;

    // 上面
    .line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;

      .logo {
        font-size: 19px;
        font-weight: 700;
        margin: 10px;

      }

      .van-search__content {
        border-radius: 8px;
        background-color: #ededed;
      }

      .logoBtn {
        width: 40px;
        height: 20px;
        font-weight: 800px;
        line-height: 20px;
        text-align: center;
        color: #dd1a21;
        border: 1px solid #dd1a21;
        border-radius: 5px;
        margin-right: 10px;
        font-size: .24rem;
      }
    }

    //滑动标签
    .tag {
      position: relative;

      //箭头
      .arrow {
        position: absolute;
        bottom: 5px;
        right: 0;
        width: 50px;
        height: 30px;
        color: #818181;
        text-align: center;
        line-height: 30px;
        background-color: #fff;
      }

      .all {
        background-color: #fff;
        line-height: 40px;
        height: 40px;
        padding-left: 20px;
        font-size: 14px;
      }
    }

    //菜单
    .menu {
      position: absolute;
      top: 88px;
      left: 0;
      z-index: 9999;
      background-color: #fff;
      height: 150px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;

      .mask {
        background-color: black;
        opacity: 0.6;
        height: 530px;
      }

      .list {
        background-color: #fff;
        padding-left: 20px;

        .btn {
          width: 70px;
          height: 30px;
          margin: 10px 5px;
        }
      }

    }


  }

  //【推荐模块】
  .recommend {
    background-color: #fff;

    // 【服务信息】
    .service_info {
      // background-color: #dd1a21;
      font-size: 12px;
      height: 40px;
      line-height: 40px;
      text-align: center;

      .icon {
        display: inline-block;
        background-repeat: no-repeat;
        background-size: 100%;
        width: 16px;
        height: 16px;
        margin-right: 5px;
        vertical-align: middle;
      }

      .icon_1 {
        background-image: url('../../assets/images/home/service0.png');
      }

      .icon_2 {
        background-image: url('../../assets/images/home/service1.png');
      }

      .icon_3 {
        background-image: url('../../assets/images/home/service2.png');
      }

    }

    //【商品展示列表】
    .van-grid {
      .van-grid-item {
        font-size: 14px;

        img {
          width: 100%;
          // height: 55px;
          margin-bottom: 5px;
        }
      }
    }

    // 【新人专享礼】
    .exclusive_title {
      text-align: center;
    }

    .exclusive {
      display: flex;
      margin: 0 10px;

      img {
        width: 100%;
      }

      .exclusive_l {
        flex: 1;
        margin-top: 5px;
        margin-right: 10px;
      }

      .exclusive_r {
        flex: 1
      }

    }

    //【类目热销榜】
    .hoot {
      margin: 0 10px;

      .hoot_top {
        display: flex;
        margin-bottom: 5px;

        img {
          flex: 1;
        }

        .img_r {
          margin-right: 10px;
        }
      }

      .hoot_btm {
        display: flex;

        img {
          flex: 1
        }
      }
    }

    //【为你精选】
    .choose {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;

      .banner-wrap {
        width: 170px;
        background: #ffe9eb;
        border-radius: 20px;

        .top {
          display: inline-block;
          width: 80px;
          height: 20px;
          background-color: #fa1e32;
          border-radius: 20px;
          color: #fff;
          font-size: 12px;
          font-weight: 900;
          text-align: center;
        }

        .btm {
          display: inline-block;
          color: #fa1e32;
          font-size: 14px;
          text-align: center;
          width: 80px;
          height: 20px;
          background: #ffe9eb;
          border-radius: 20px;
        }
      }

    }
  }

  //【居家生活】
  .life {
    .floor {
      background-color: #fff;
    }
  }

  //加载


  //【回到顶部】
  .custom {
    background-color: #d31919;
  }
}
</style>

